<template>
  <div>
   <h3>欢迎光临_Vue开发的收银系统_水果店</h3>
   <table>
    <tr>
     <td><h3>苹果10￥/斤,折扣 (8折)</h3></td>
    </tr>
    <tr>
     <td>请输入你要购买的斤数
      <input type="number" v-model.lazy="pay">
     </td>
    </tr>
    <tr>
     <td><button @click="payMoney(pay)">结账买单~</button></td>
    </tr>
    <tr>
     <td><p>结账单：总价：{{ total }}￥元折后价：{{ price }}￥元省了：{{ sale }}￥元</p></td>
    </tr>
   </table>
  </div>
</template>

<script>
export default {
data() {
 return {
  pay:0,
  total:0,
  price:0,
  sale:0
 }
},
methods:{
payMoney() {
 this.total = this.pay * 10
 this.price = this.total * 0.8
 this.sale  = this.total - this.price
}
}
}
</script>

<style>
table{
 width: 500px;
 height: 200px;
 border: 1px solid #999;
}
td {
 border: 1px solid #999;
 text-align: center;
}
</style>